<template>
	<view class="app-public-msg-detail-inputbar">
		<!-- <e-transition :show="showQuick" mode="slide-right" :duration="300">
			<quick @send="handleSendQuickMsg" />
		</e-transition> -->
		<view class="app-public-msg-detail-inputbar__body">
			<view class="app-public-msg-detail-inputbar__textarea e-p-l-20" :style="[textareaStyle]">
				<view class="app-public-msg-detail-inputbar__textarea__icon ">
					<image src="/pages/public/static/msg/store.png"
						class="app-public-msg-detail-inputbar__textarea__icon-img"
						@tap="$goTo('/pages/store/index', {id:user})"></image>
				</view>
				<view class="app-public-msg-detail-inputbar__textarea__box">
					<textarea ref="textareaRef" auto-height :maxlength="-1"
						class="app-public-msg-detail-inputbar__textarea__box-input" :style="[inputStyle]"
						v-model="msgTxt" @linechange="linechange" @keyboardheightchange="handleKeyboardheightchange"
						@confirm="sendMsg" />
				</view>
				<view class="app-public-msg-detail-inputbar__textarea__icon">
					<image src="/pages/public/static/msg/emoji.png"
						class="app-public-msg-detail-inputbar__textarea__icon-img e-m-r-20" @tap="handleEmojiShow">
					</image>
					<view class="app-public-msg-detail-inputbar__textarea__btn" :style="btnStyle" @tap="sendMsg"
						v-if="msgTxt">
						<text class="app-public-msg-detail-inputbar__textarea__btn-text">{{toI18('public.send')}}</text>
					</view>
					<image src="/pages/public/static/msg/chat_add.png"
						class="app-public-msg-detail-inputbar__textarea__icon-img" v-else @tap="handleToolShow"></image>

				</view>
			</view>
			<view class="app-public-msg-detail-inputbar__components" :style="[{height:`${componentsHeight}px`}]">
				<emojiSwiper @addEmoji="addEmoji" v-if="showEmoji" />
				<tool ref="toolRef" :user="user" :primary="primary" :unitEn="unitEn" v-if="showTool" />
			</view>
		</view>



	</view>
</template>

<script lang="ts" setup>
	import {
		ref,
		computed,
		watch,
		onUnmounted
	} from 'vue'
	import emojiSwiper from './emoji.vue'
	import tool from './tool.vue'
	import quick from './quick.vue'
	// #ifndef APP-NVUE
	import vueIM from '@/common/utils/IM/IM'
	import {
		useI18n
	} from '@/common/hooks'
	// #endif
	import type { IMOrderItem, GoodsItem } from '@/common/request/api'
	import { sendOrder, sendGoods } from '../utils'
	import { isBoolean } from '@/common/utils'



	const props = defineProps<{
		user: string,
		unitEn : string,
		primary : string,
		showTips : boolean
	}>()
	const emit = defineEmits(['heightChange'])
	let toI18:any
	let IM : typeof vueIM
	// #ifdef APP-NVUE
	IM = getApp()!.globalData!.IM
	toI18 = getApp()!.globalData!.$t
	// #endif
	// #ifndef APP-NVUE
	IM = vueIM
	toI18 = useI18n('')
	// #endif

	const init = () => {
		// 开启会话
		const msg = new IM.message('WxSessionOperReq', {
			body: {
				chatlinkid: props.user,
				oper: 1
			}
		})
		IM.send(msg)

	}

	init()


	const showQuick = ref(false)

	watch(() => props.showTips, (v) => {
		if (isBoolean(v)) {
			setTimeout(() => {
				if (v !== props.showTips) return
				showQuick.value = !props.showTips
				heightChange()
			}, 500)
		}
	}, {
		immediate: true
	})

	const quickHeight = computed(() => showQuick.value ? 36 : 0)



	const msgTxt = ref('')

	const componentsHeight = ref(0)
	let componentsShow = false
	const textareaHeight = ref(35)
	const keyboardheight = ref(0)

	const showEmoji = ref(false)

	const handleEmojiShow = () => {
		showEmoji.value = true
		showTool.value = false
		componentsShow = true
		componentsHeight.value = 150
		if (keyboardheight.value) {
			textareaRef.value?.blur?.()
		} else {
			heightChange()
		}


	}

	const showTool = ref(false)

	const handleToolShow = () => {
		showTool.value = true
		showEmoji.value = false
		componentsShow = true
		componentsHeight.value = 110
		if (keyboardheight.value) {
			textareaRef.value?.blur?.()
		} else {
			heightChange()
		}
	}



	const textareaStyle = computed(() => {
		return {
			paddingBottom: `${keyboardheight.value > 0 ? 12 : 6}px`
		}
	})

	const handleKeyboardheightchange = (e : {
		detail : {
			height : number
		}
	}) => {
		keyboardheight.value = e.detail.height
		if (!keyboardheight.value && !componentsShow) {
			componentsHeight.value = 0
			showTool.value = false
			showEmoji.value = false
		}
		heightChange()

	}

	const inputStyle = computed(() => {
		// #ifdef MP-WEIXIN||MP-ALIPAY
		return {
			minHeight: `${textareaHeight.value}px`
		}
		// #endif
		return {
			height: `${textareaHeight.value}px`
		}
	})
	const heightChange = () => {
		// 36为quick的高度
		emit('heightChange', componentsHeight.value + quickHeight.value, textareaHeight.value, keyboardheight.value)
	}

	const textareaRef = ref()


	const hidden = () => {
		componentsHeight.value = 0
		showTool.value = false
		showEmoji.value = false
		componentsShow = false
		textareaRef.value?.blur?.()
	}

	let textareaPadding = 29

	// #ifdef APP-NVUE
	textareaPadding = 0
	// #endif

	const linechange = (e : {
		detail : {
			height : number
		}
	}) => {
		// 父容器上下共12px的内边距加textarea自身的上下16边距+1px的误差 = 29
		textareaHeight.value = e.detail.height + textareaPadding
		heightChange()
	}

	const btnStyle = computed(() => {
		return {
			backgroundColor: props.primary
		}
	})

	// let hasEmoji = false

	const addEmoji = (emoji : string) => {
		msgTxt.value += emoji
		// hasEmoji = true
	}

	const sendMsg = () => {
		let value = msgTxt.value
		value = value.replace(/<br>/gm, "\n")

		var regx = /<[^>]*>|<\/[^>]*>/gm
		value = value.replace(regx, "")
		value = value.replace(/&nbsp;/gm, "  ")
		value = value.substring(0, 2000) //控制发送字数
		
		const msg = new IM.message('WxFriendChatReq', {
			body: {
				chatlinkid: props.user,
				c: value
			}
		})
		IM.send(msg)
		msgTxt.value = ''
		// hasEmoji = false
		// let msg = new IM.message(hasEmoji ? 'emoji' : 'text', IM.getUniqueId())
		// msg.set({
		// 	to: props.user,
		// 	body: msgTxt.value
		// })
		
	}

	const handleSendQuickMsg = (text : string) => {
		console.log(text)
		// let msg = new IM.message('quick', IM.getUniqueId())
		// msg.set({
		// 	to: props.user,
		// 	body: text
		// })
		// IM.send(msg)
	}

	const toolRef = ref()

	const _sendOrder = (order : IMOrderItem) => {
		sendOrder(IM, props.user,props.unitEn, order)
	}
	const _sendGoods = (goods : GoodsItem) => {
		
		sendGoods(IM, props.user,props.unitEn,goods)
	}
	
	onUnmounted(() => {
		// 关闭会话
		const msg = new IM.message('WxSessionOperReq', {
			body: {
				chatlinkid: props.user,
				oper: 2
			}
		})
		IM.send(msg)
	})


	defineExpose({
		hidden,
		sendOrder: _sendOrder,
		sendGoods: _sendGoods
	})
</script>

<style lang="scss" scoped>
	@include appBem_b(public-msg-detail-inputbar) {
		@include fixed-bottom(999);

		@include appBem_e(body) {
			background-color: $base-color-white;
		}

		@include appBem_e(textarea) {
			@include flex;
			align-items: flex-end;

			&__box {
				flex: 1;
				padding-top: 6px;
				padding-right: 20rpx;

				&-input {
					/*  #ifndef  APP-NVUE  */
					width: auto;
					/*  #endif  */
					flex: 1;
					/*  #ifndef  APP-NVUE  */
					min-height: 19px;
					/*  #endif  */
					border-radius: 36px;
					background: #F7F7F7;
					line-height: 36rpx;
					font-size: 26rpx;
					padding: 8px 32rpx;
				}
			}


			&__icon {
				@include flex;
				align-items: center;
				padding-right: 20rpx;
				// padding-top: 6px;
				height: 35px;

				&-img {
					width: 48rpx;
					height: 48rpx;
				}
			}

			&__btn {
				width: 88rpx;
				height: 54rpx;
				border-radius: 10rpx;
				@include flex;
				align-items: center;
				justify-content: center;

				&-text {
					color: $base-color-white;
					font-size: 24rpx;
				}
			}


		}

		@include appBem_e(components) {
			transition: height 200ms ease-in-out;
		}
	}
</style>